<template>
  <div class="goodsInfo" v-if="goodLists && Object.keys(goodLists).length !== 0">
    <div class="goodsInfoDesc">
      <div class="start"></div>
      <div class="desc">{{goodLists.desc}}</div>
      <div class="end"></div>
    </div>
    <div class="detailResult">{{goodLists.key}}</div>
    <div class="detailDetailsImg">
      <div v-for="item in goodLists.list">
        <img :src="item" alt="item" @load="goodListLoad">
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "DetailGoodsInfo",
    props: {
      goodLists: {
        type: Object,
        default(){
          return {};
        }
      }
    },
    methods: {
      goodListLoad(){
        this.$emit("goodLoad");
      }
    }
  }
</script>

<style scoped>
  .goodsInfo{
    margin-top: 10px;
    background-color: white;
    padding: 0 5px;
  }
  .goodsInfoDesc{
    padding: 20px 0px;
    font-size: 14px;
  }
  .goodsInfoDesc .start{
    width: 90px;
    height: 1px;
    background-color: #333 ;
    position: relative;
    float: left;
  }
  .goodsInfoDesc .desc{
    padding: 15px 0;
  }
  .goodsInfoDesc .end{
    width: 90px;
    height: 1px;
    background-color: #333;
    position: relative;
    float: right;
  }
  .goodsInfoDesc .start::before{
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    bottom: 0;
    background-color: #333;
  }
  .goodsInfoDesc .end::before{
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    right: 0;
    bottom: 0;
    background-color: #333;
  }
  .goodsInfo .detailResult{
    font-size: 15px;
  }
  .detailDetailsImg{
    padding: 5px 0;
  }
  .detailDetailsImg img{
    width: 100%;
  }
</style>